<html>
	<style>
		* {font-family:Arial}
		div {float: left; margin: 0 0 0 0; }
	</style>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<title>NetData Datasource Example</title>
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">

	google.load('visualization', '1', {packages: ['charteditor']});
	// google.load('visualization', '1.0');  // Note: No need to specify chart libraries.

	google.setOnLoadCallback(drawVisualization);

	var wrapper;
	function drawVisualization() {
		wrapper = new google.visualization.ChartWrapper({
			containerId: 'graph_div',
			chartType: 'AreaChart',
			dataSourceUrl: 'http:/datasource/system.cpu/60/1/max', // it needs a protocol to work, even in relative URLs
			refreshInterval: 1,
			options: {
				isStacked: true,
				areaOpacity: 0.85,
				lineWidth: 1,
				title: 'CPU utilization',
				width: window.innerWidth - 50,
				height: window.innerHeight - 50,
				hAxis: {title: "Time of Day", viewWindowMode: 'maximized', format:'HH:mm:ss'},
				vAxis: {title: "percent", viewWindowMode: 'pretty', minValue: 0, maxValue: 100},
				focusTarget: 'category',
				annotation: {'1': {style: 'line'}},
			},
		});
		wrapper.draw();
	}

	function openEditor() {
		var editor = new google.visualization.ChartEditor();
		google.visualization.events.addListener(editor, 'ok', function() {
			wrapper = editor.getChartWrapper();
			wrapper.draw(document.getElementById('graph_div'));
		});
		editor.openDialog(wrapper);
	}

	</script>
	</head>
	<body>
		<input type='button' onclick='openEditor()' value='Open Editor'>
		<br/>
		<div><div id="graph_div"/></div>
	</body>
</html>
